<template>
	<view class="box">
		<loading :status="loadStatus"></loading>
		<view class="form_ct_list " :class="{focus: focus.input1}">
			<input :password="flag == true?false:true" :placeholder="i18n.newPass" class="r_pt input" v-model="pw" @blur="focus.input1=false" @focus="focus.input1=true" />
			<text class="iconfont" @click="flag = !flag">{{flag == true ? '&#xe648;': '&#xe635;'}}</text>
		</view>
		<view class="form_ct_list " :class="{focus: focus.input2}">
			<input :password="flag2 == true?false:true" :placeholder="i18n.againPass" class="r_pt input" v-model="repw" @blur="focus.input2=false" @focus="focus.input2=true" />
			<text class="iconfont" @click="flag2 = !flag2">{{flag2 == true ? '&#xe648;': '&#xe635;'}}</text>
		</view>
		<view class="plr30 mt-100">
			<button class="btn-block" :class="lock ? 'disabled' : ''" hover-class="btn-hover" type="primary" @tap="formSubmit">{{i18n.submit}}</button>
		</view>
	</view>
</template>

<script>
	import {
		isValPw
	} from '../../utils/val.js'
	import loading from '../../components/loading.vue'
	export default {
		data() {
			return {
				mobile: '',
				pw: '',
				repw: "",
				lock: false,
				loadStatus: 'noMore',
				focus: {
					input1: false,
					input2: false,
				},
				flag:false,
				flag2:false
			};
		},
		components: {
			loading
		},
		onShow() {
            uni.setNavigationBarTitle({
               title: this.$t('reset.resetPass')
            })
		},
		computed: {
		    i18n() {
		    	return this.$t('reset');
		    }
		},
		methods: {
			formSubmit() {
				if (this.lock) return false;
				if (!this.pw) {
					this.$toast(this.$t('reset.newPass'));
					return false;
				}
				if (!isValPw(this.pw)) {
					this.$toast(this.$t('reset.checkPass'));
					return false;
				}
				if (!this.repw) {
					this.$toast(this.$t('reset.againPass'));
					return false;
				}
				if (this.pw !== this.repw) {
					this.$toast(this.$t('reset.inconsistent'));
					return false;
				}
				var data = {
					password: this.pw,
					verify_token: uni.getStorageSync('token')
				};
				this.lock = true;
				this.loading = 'loading';
				this.$post("api/user/forget/reset", data).then(res => {
					this.$toast(res.msg)
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages/login/index'
						});
					}, 1000)
				}).finally(res => {
					this.lock = false;
					this.loading = 'noMore';
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.box {
		overflow: hidden;
	}

	.form_ct_list {
		height: 96upx;
		// line-height: 96upx;
		position: relative;
		margin: 40upx 28upx 0upx 28upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid var(--border);
		transition: border-bottom-color .3s ease;
		&.focus {
			border-bottom-color: var(--theme-color)
		}
		.input {
			font-size: 30upx;
		}
        .iconfont{
			color: var(--txt-color);
		}
		.r_pt {
			flex: 1;
		}
	}
</style>
